import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Me from '../views/Me.vue'
import Register from '../views/Register.vue'
import Recommend from '../views/Recommend.vue'
import Message from '../views/Message.vue'
import Chinese from '../views/ChineseStyle.vue'
import Japanese from '../views/JapaneseStyle.vue'
import Korean from '../views/EuropeanStyle.vue'
import European from '../views/EuropeanStyle.vue'
import Other from '../views/OtherStyles.vue'
import Set from '../views/Set.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/set',
    component: Set
  },
  {
    path: '/Japanese',
    component: Japanese
  },
  {
    path: '/Korean',
    component: Korean
  },
  {
    path: '/European',
    component: European
  },
  {
    path: '/Other',
    component: Other 
  },
  {
    path: '/Chinese',
    name: 'Chinese',
    component: Chinese
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/recommend',
    name: 'Recommend',
    component: Recommend
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '/me',
    name: 'Me',
    component: Me
  },
  {
    path: '/message',
    name: 'Message',
    component:  Message
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router
